<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="shortcut icon" href="../../../docs/src/assets/image2D.png">
    <script src="../../../build/image2D.js"></script>
    <title>image2D - 用例测试 - path路径</title>
</head>

<body>
    <script>

        // 准备画布
        var canvas = $$('<canvas>非常抱歉，您的浏览器不支持canvas!</canvas>').attr({
            "width": 400,
            "height": 200
        }).appendTo('body');

        // 获取并配置画笔
        var painter = canvas.painter().config({
            "strokeStyle": "red",
            "lineWidth": 1
        });

        /**
         * 测试开始
         * ----------------------------
         */

        painter.beginPath()
            .lineTo(200, 50).lineTo(300, 100).lineTo(150, 150).lineTo(100, 200)
            .closePath()
            .stroke();

        // 测试arc
        painter
            .beginPath()
            .config({
                "strokeStyle": "blue",
                "lineWidth": "10"
            })
            .arc(120, 120, 50, Math.PI / 3, -Math.PI / 2)
            .stroke();

        // 测试虚线
        painter
            .config({
                'lineDash': [10, 10, 40]
            })
            .beginPath()
            .lineTo(100, 50).lineTo(300, 100).arc(120, 120, 50, Math.PI / 3, -Math.PI / 2)
            .stroke();

        // 测试轮廓并填充画笔所画的区域
        painter.config({
            lineDash: [],
            lineWidth: 2,
            fillStyle: 'green',
            strokeStyle: 'red'
        }).beginPath()
            .moveTo(200, 100).lineTo(100, 100).lineTo(200, 200).lineTo(200, 100)
            .full();
    </script>
</body>

</html>